<route lang="yaml">
meta:
  enabled: false
</route>

<script setup lang="ts">
import moment from 'moment'
import { onActivated, ref } from 'vue'
import Api from '@/api/modules/system/logon'

const tableData: any = ref([])

// 请求参数
const pagination = ref({
  page: 1,
  size: 10,
  total: 0,
  sizes: [10, 20, 50, 100],
  layout: 'total, sizes, ->, prev, pager, next, jumper',
  sort: null as string | null,
  order: null as string | null,
})
// 请求列表
function getList() {
  Api.list({
    page: pagination.value.page,
    limit: pagination.value.size,
  }).then((res: any) => {
    console.log(res, '列表打印')
    tableData.value = res.data
    pagination.value.total = res.count
  })
}
getList()
onActivated(() => {
  getList()
})

function removeBatch(e: any) {

}
// 分页方法
function sizeChange(e: any) {
  pagination.value.size = e
  getList()
}
function currentChange(e: any) {
  pagination.value.page = e
  getList()
}
</script>

<template>
  <div>
    <page-main style="position: relative;">
      <el-table :data="tableData" border highlight-current-row height="calc(100vh - 240px)">
        <!-- <el-table-column type="selection" width="55" /> -->
        <el-table-column prop="id" label="ID" width="60" align="center" />
        <el-table-column prop="username" label="操作账户" width="100" align="center" />
        <el-table-column prop="method" label="请求方式" width="90" align="center" />
        <el-table-column prop="module" label="操作模块" width="100" align="center" />
        <el-table-column prop="param" label="请求参数" width="120" align="center">
          <template #default="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.param"
              placement="top"
            >
              <div style="height: 20px; overflow: hidden;">
                {{ scope.row.param }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="url" label="请求地址" width="120" align="center">
          <template #default="scope">
            <el-tooltip
              effect="dark"
              :content="scope.row.url"
              placement="top"
            >
              <div style="height: 20px; overflow: hidden;">
                {{ scope.row.url }}
              </div>
            </el-tooltip>
          </template>
        </el-table-column>

        <el-table-column prop="ip" label="IP地址" width="130" align="center" />
        <el-table-column prop="ip_city" label="IP所属地" align="center" />
        <el-table-column prop="os" label="操作系统" width="100" align="center" />
        <el-table-column prop="browser" label="浏览器" width="100" align="center" />
        <!-- <el-table-column prop="type" label="操作类型" width="100" align="center" /> -->
        <el-table-column prop="type" label="操作类型" width="120" align="center">
          <template #default="scope">
            <el-tag
              type="success"
            >
              {{ ['登录系统', '注销系统', '操作日志'][scope.row.type - 1] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="roles" label="创建时间" width="180" align="center">
          <template #default="scope">
            {{ moment(scope.row.create_time * 1000).format('YYYY-MM-DD HH:mm:ss') }}
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="80" align="center">
          <template #default="scope">
            <el-popconfirm title="确定删除吗？" @confirm="removeBatch(scope.row.id)">
              <template #reference>
                <el-button type="danger" text>
                  <template #icon>
                    <svg-icon name="ep:delete" />
                  </template>删除
                </el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination :current-page="pagination.page" :total="pagination.total" :page-size="pagination.size" :page-sizes="pagination.sizes" :layout="pagination.layout" :hide-on-single-page="false" class="pagination" background @size-change="sizeChange" @current-change="currentChange" />
    </page-main>
  </div>
</template>

<style lang="scss" scoped>
.btnbox {
  position: absolute;
  right: 20px;
  top: 20px;
}
.btnbox > .el-button { font-size: 12px; }

.el-table {
  :deep(.is-text) { padding: 8px 0; }
}

:deep(.el-button__text--expand) {
  letter-spacing: 0;
  margin-right: 0;
}
</style>
